<template>
  <div id="right" style="overflow-y:auto;">
    <el-page-header @back="$router.back()" content="深圳博爱医院"></el-page-header>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="发行卡量" name="first">
        <el-table
          :data="data"
          stripe
          highlight-current-row
          border
          :header-cell-style="{backgroundColor:'#006699',color:'#333'}"
        >
          <el-table-column prop="fatime" label="发卡日期" width="200" />

          <el-table-column prop="userName" label="姓名" width="180" align="center" />
          <el-table-column prop="age" label="年龄" width="160" align="center" />
          <el-table-column prop="type" label="类型" width="80" align="center" />
          <el-table-column prop="sex" label="性别" width="160" align="center" />
          <el-table-column prop="papersNumber" label="身份证号" align="center" />
        </el-table>
        <div class="page">
          <el-pagination
            :current-page.sync="currentPage1"
            :page-size="20"
            layout="total, prev, pager, next"
            :total="78"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <div class="right"></div>
      <el-tab-pane label="使用卡量" name="second">
        <el-table
          :data="data1"
          stripe
          highlight-current-row
          border
          :header-cell-style="{backgroundColor:'#006699',color:'#333'}"
        >
          <el-table-column fixed prop="fatime" label="用卡日期" width="200" />

          <el-table-column prop="userName" label="姓名" width="180" align="center" />
          <el-table-column prop="age" label="年龄" width="160" align="center" />
          <el-table-column prop="type" label="类型" width="80" align="center" />
          <el-table-column prop="sex" label="性别" width="160" align="center" />
          <el-table-column prop="papersNumber" label="身份证号" align="center" />
        </el-table>
        <div class="page">
          <el-pagination
            :current-page.sync="currentPage1"
            :page-size="20"
            layout="total, prev, pager, next"
            :total="210"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="该医院数据统计" name="third">
        <div class="box gmb">
          <div class="lefttbox">
            <v-chart style="width:100%;height:240px;" :options="menzhen" autoresize />
          </div>
        </div>
        <el-row :gutter="10" class="gmb">
          <el-col :span="6">
            <div class="box flex-row">
              <div class="icon-box">
                <div class="icon-title">建卡数量</div>
                <div class="icon-number">4430</div>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="box flex-row">
              <div class="icon-box">
                <div class="icon-title">成人数量</div>
                <div class="icon-number">8820</div>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="box flex-row">
              <div class="icon-box">
                <div class="icon-title">儿童数量</div>
                <div class="icon-number">1033</div>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="box flex-row">
              <div class="icon-box">
                <div class="icon-title">男性</div>
                <div class="icon-number">2209</div>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="box flex-row">
              <div class="icon-box">
                <div class="icon-title">女性</div>
                <div class="icon-number">2296</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="box gmb">
          <v-chart style="width:100%;height:300px" :options="renqun" autoresize />
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="bottom"></div>
  </div>
</template>
<script>
export default {
  name: "healthlist",
  data() {
    return {
      men: 0,
      women: 0,
      menzhen: {
        title: {
          text: "各时间段就诊人数",
          subtext: "按小时统计",
          color: "#336699"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: ""
          }
        },
        grid: {
          top: 60,
          left: 0,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(220, 220, 220, 0.8)"
        },
        yAxis: {
          type: "value",
          splitLine: {
            //网格线
            show: false
          },
          axisLabel: {
            // formatter: function (value, index) {
            //   return value + '%';
            // },
            color: "#000",
            fontSize: 14
          },
          axisTick: {
            show: true
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisLabel: {
            // formatter: function (value, index) {
            //   return value + '%';
            // },
            color: "#000",
            fontSize: 14
          },
          data: [
            "0点~1点",
            "1点-2点",
            "2点-3点",
            "3点-4点",
            "4点-5点",
            "5-6点",
            "6点-7点"
          ]
        },
        series: {
          name: "挂号人数",
          barMinWidth: 10,
          type: "bar",
          backgroundColor: "#FBFBFB",
          itemStyle: {
            normal: {
              color: params => {
                let colors = [
                  "#CCCCFF",
                  "#CCCCFF",
                  "#CCCCFF",
                  "#CCCCFF",
                  "#CCCCFF",
                  "#CCCCFF",
                  "#CCCCFF"
                ];
                // return colors[params.dataIndex];
              }
            }
          },
          label: {
            //默认文字显示

            show: true,
            position: "top",
            textStyle: {
              fontSize: 14
            },
            formatter: function(params) {
              return params.value + "人";
            }
          },
          data: [270, 236, 326, 336, 337, 384, 603]
        }
      },
      renqun: {
        title: {
          text: "门诊各年龄段人数",
          subtext: "按小时统计"
        },
        xAxis: {
          type: "category",
          data: [
            "0-10",
            "10-20",
            "20-30",
            "30-40",
            "40-50",
            "50-60",
            "60-70",
            "70-80"
          ]
        },
        yAxis: {
          type: "value"
        },

        series: {
          name: "挂号人数",
          type: "line",
          smooth: true,
          lineStyle: {
            normal: {
              width: 2,
              color: "#47D8BE"
            }
          },
          label: {
            //默认文字显示
            show: true,
            position: "top",
            textStyle: {
              color: "#333",
              fontSize: 14
            },
            formatter: function(params) {
              return params.value + "人";
            }
          },
          itemStyle: {
            //默认图标颜色
            color: "#333"
          },
          emphasis: {
            //选中后样式
            itemStyle: {
              color: "#333"
            },
            label: {
              color: "#333",
              fontSize: 16
            }
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#66CC99"
                },
                {
                  offset: 1,
                  color: "#fff"
                }
              ],
              globalCoord: false
            }
          },
          data: [10, 20, 100, 30, 320, 23, 49, 547, 1010, 857, 77]
        }
      },
      age: {
        backgroundColor: "#2c343c",
        title: {
          text: "就诊年龄比例",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc",
            fontSize: 16
          }
        },

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            title: {
              text: "就诊人群比例",
              subtext: "按小时统计"
            },
            name: "就诊人群比例",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            fontSize: 18,
            color: "#FFFFFF",
            data: [
              { value: 335, name: "男性" },
              { value: 310, name: "女性" }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              color: "#fff",
              fontSize: 16
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: "#0099CC",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      },

      activeName: "first",
      MobileNumber: "",
      UserName: "",
      PapersNumber: "",
      pageIndex: 1,
      dataCount: 0,
      data: [
        {
          type: "成人",
          sex: "女",
          age: "25",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "赖佳悦",
          papersType: "身份证",
          papersNumber: "440303********7598",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "18",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "邹新晴",
          papersType: "身份证",
          papersNumber: "440303********4899",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "儿童",
          sex: "男",
          age: "6",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "袁阳泽",
          papersType: "身份证",
          papersNumber: "440303********117X",
          mobileNumber: "181****1012",
          gender: 1,
          nation: "侗族",
          address: "南昌",
          healthCardNumber:
            "1ED0E8AE23C8ECB5B7C434F180548D91D867462EE07839CB59E1B1F34702A89E:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "29",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "卢凯唱",
          papersType: "身份证",
          papersNumber: "440303********7539",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "36",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "姚良俊",
          papersType: "身份证",
          papersNumber: "440303********8777",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "23",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "罗俊才",
          papersType: "身份证",
          papersNumber: "440303********5859",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "33",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "林宏儒",
          papersType: "身份证",
          papersNumber: "440303********2535",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "26",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "邓奇希",
          papersType: "身份证",
          papersNumber: "440303********4194",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "曾阳州",
          papersType: "身份证",
          papersNumber: "440303********9550",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "女",
          age: "22"
        },
        {
          type: "成人",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "萧英博",
          papersType: "身份证",
          papersNumber: "440303********5699",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "18"
        },
   
        {
          type: "成人",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "谭康平",
          papersType: "身份证",
          papersNumber: "440303********5699",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "22"
        }
      ],
      data1: [
        {
          type: "成人",
          sex: "女",
          age: "22",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "李蕾",
          papersType: "身份证",
          papersNumber: "	420102********0715",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "19",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "李昊苍",
          papersType: "身份证",
          papersNumber: "	420102********0870",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "儿童",
          sex: "男",
          age: "2",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "易文翰",
          papersType: "身份证",
          papersNumber: "420102********7490",
          mobileNumber: "181****1012",
          gender: 1,
          nation: "侗族",
          address: "南昌",
          healthCardNumber:
            "1ED0E8AE23C8ECB5B7C434F180548D91D867462EE07839CB59E1B1F34702A89E:1::3602A0015"
        },
        {
          type: "儿童",
          sex: "女",
          age: "3",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "江明旭",
          papersType: "身份证",
          papersNumber: "420102********4599",
          mobileNumber: "189****5796",
          gender: 1,
          nation: "汉族",
          address: "南昌",
          healthCardNumber:
            "C1823F4C36EEA9E05BD8698543CC224DCBC17E6F801F09151CAED2E111D0AE2D:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "36",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "梁永怡",
          papersType: "身份证",
          papersNumber: "	420102********1777",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "女",
          age: "23",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "林英睿",
          papersType: "身份证",
          papersNumber: "	420102********9779",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "33",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "阎星文",
          papersType: "身份证",
          papersNumber: "	420102********7255",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          sex: "男",
          age: "31",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "姚欣怿",
          papersType: "身份证",
          papersNumber: "420102********0731",
          mobileNumber: "189****9175",
          gender: 1,
          nation: "汉族",
          address: "南昌象湖",
          healthCardNumber:
            "4955D381AF3973257BBE5E40B98907429D3D40E82159C823DCF98D2A79339F5C:1::3602A0015"
        },
        {
          type: "成人",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "党奇玮",
          papersType: "身份证",
          papersNumber: "420102********8311",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "女",
          age: "22"
        },
        {
          type: "成人",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "陆弘光",
          papersType: "身份证",
          papersNumber: "	420102********5655",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "18"
        },
        {
          type: "成人",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "夏文",
          papersType: "身份证",
          papersNumber: "	420102********1953",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "19"
        },
        {
          type: "成人",
          fatime: "2019.6.3",
          registerName: "超级管理员",
          userName: "余旭尧",
          papersType: "身份证",
          papersNumber: "420102********9533",
          mobileNumber: "137****4190",
          gender: 1,
          nation: "朝鲜族",
          address: "河南",
          healthCardNumber: "20200601090345877276253529332008",
          sex: "男",
          age: "22"
        }
      ]
    };
  },
  mounted() {},
  methods: {
    pageGo(index) {
      this.pageIndex = index;
      this.getList();
    }
  },
  components: {},
  watch: {},
  props: {},
  computed: {},
  //组件销毁事件
  destroyed() {}
};
</script>
<style lang="" >
ul,
li,
ol {
  list-style: none;
}
.flex-row {
  display: flex;
  flex-direction: row !important;
}
.flex {
  display: flex;
  flex-direction: column;
}
.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.flex3 {
  flex: 3;
}
.flex4 {
  flex: 4;
}
.bigClass {
  font-size: 20px;
  margin-bottom: 10px;
}
.bigClass span {
  font-size: 14px;
  margin-left: 10px;
  color: #999;
}
.box {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
  padding: 20px;
}
.icon-box {
  flex: 1;
  text-align: right;
  text-align: center;
  /* box-shadow:0 0 5px #ccc; */
}
.icon-title {
  height: 30px;
  line-height: 20px;
  font-size: 20px;
  color: #336699;
}
.icon-number {
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  color: #336699;
  overflow: hidden;
}
.bigClass {
  color: #333333;
  font-weight: bold;
}
</style>